<template>
  <div>
    <div class="replyCommentManage-content" v-if="replyCommentList.length">
      <el-card
        class="replyCommentManage"
        shadow="never"
        v-for="replyComment in replyCommentList"
        :key="replyComment.id"
      >
        <ReplyCommentManageCard :replyComment="replyComment" />
      </el-card>
      <el-pagination
        small
        background
        :current-page="page"
        @current-change="pageChange"
        :page-size="limit"
        layout="prev, pager, next"
        :total="count"
      >
      </el-pagination>
    </div>
    <div>
      <el-empty description="暂无回复评论"></el-empty>
    </div>
  </div>
</template>

<script>
import ReplyCommentManageCard from '@/components/Comment/ReplyCommentManageCard'
export default {
  props: {},
  components: {
    ReplyCommentManageCard
  },
  data() {
    return {
      limit: 5,
      page: 1,
      // 乐谱列表
      replyCommentList: [],
      count: 0,
      currentReplyComment: {},
      ShowDialogVisible: false
    }
  },
  computed: {
    // 获取用户信息
    userInfo() {
      return this.$store.state.user.userInfo
    }
  },
  watch: {
    userInfo: {
      immediate: true,
      deep: true,
      handler(val) {
        if (val) {
          // 获取评论列表
          this.getReplyCommentList()
        }
      }
    }
  },
  created() {},
  mounted() {
    // 等待页面渲染结束后获取数据
    this.$nextTick(() => {
      // 监听删除乐谱事件后刷新列表
      this.$bus.$on('DeleteReplyCommentSuccess', this.ReloadReplyCommentList)
      this.$bus.$on(
        'ShowDocumentReplyCommentDialog',
        this.ShowDocumentReplyCommentDialog
      )
    })
  },
  beforeDestroy() {
    this.$bus.$off('DeleteReplyCommentSuccess', this.ReloadReplyCommentList)
  },
  methods: {
    // 获取乐谱列表
    async getReplyCommentList() {
      const { userInfo, limit, page } = this
      const res = await this.$API.user.getReplyCommentListByUserId(
        userInfo.id,
        limit,
        page
      )
      // 如果没有更多数据
      if (!res.data) {
        // 判断是否为第一页
        if (this.page != 1) {
          this.page--
          this.getReplyCommentList()
        } else {
          // 显示空数据
          return (this.replyCommentList = [])
        }
      }

      if (res.status == 200) {
        this.replyCommentList = res.data.payload
        this.count = res.data.count
      }
    },
    // 展示文档评论对话框
    ShowDocumentReplyCommentDialog(currentReplyComment) {
      this.currentReplyComment = currentReplyComment
      this.ShowDialogVisible = true
    },
    // 关闭对话框事件
    handleDialogClosed() {
      this.ShowDialogVisible = false
      this.currentReplyComment = {}
    },
    // 刷新乐谱列表
    ReloadReplyCommentList() {
      this.getReplyCommentList()
      // 重新获得用户列表
      this.$store.dispatch('user/GetUserInfo')
    },
    // 页数变化
    pageChange(page) {
      // console.log(page)
      this.page = page
      this.getReplyCommentList()
    }
  }
}
</script>

<style scoped>
.replyCommentManage-content {
  margin-top: 20px;
}
.replyCommentManage {
  margin-bottom: 20px;
}
</style>
